<template>
	<div style="background-color: #F2F4FA;">
		<div class="wrap wrap-bg">
			<div class="container">
				<div class="step">
					<router-link to="/holdall"><span class="active">工具箱</span></router-link>
					&nbsp;<span>/</span>&nbsp;
					<router-link to="/select_author"><span>诗词起名</span></router-link>
				</div>
				<div class="head-title">
					<span></span>
					<h3>2.选择诗词</h3>
					<span></span>
				</div>
				<div class="head-box">
					<el-row :gutter="20">
						<el-col :span="24" :md="19">
							<div class="input-box">
								<i class="el-icon-search"></i>
								<el-input v-model="searchValue" placeholder="搜索作者/诗词" placeholder-class="input-pla" clearable></el-input>
							</div>
						</el-col>
						<el-col :span="12" :md="3" class="mt-3">
							<el-select v-model="selectValue" placeholder="请选择" >
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="12" :md="2" class="mt-3">
							<div class="btn" @click="getNameInfo()">查询</div>
						</el-col>
					</el-row>
				</div>
				<div class="search-hot">
					<span class="hot-title">搜索热词</span>
					<span class="hot-item" v-for="(item,index) in hotArr" :key="index" @click="hotClick(item)">{{item}}</span>
					
				</div>
			</div>
		</div>
		<div class="container wrap" style="padding-top: 30px;" v-if="!wFlag">
			<el-row :gutter="20">
				<el-col :span="24" :md="16">
					<div class="c-bottom-box box">
						<div class="title" id="recom-jump">
							<span class="circle"></span>
							「{{searchValue}}」诗词全集({{recomTotal}}首)
						</div>
						<el-row :gutter="10">
							<el-col :span="12" class="item-box" v-for="(item,index) in dynastyList" :key="index">
								<span class="item-index">{{index+1}}.</span>
								<span class="item-name" @click="dynastyClick(item,index)" :class="dynastyIndex==index?'on':''">《{{item.mingcheng}}》</span>
							</el-col>
						</el-row>
						<div class="page-box">
							<el-pagination background layout="prev, pager, next" :total="recomTotal" :page-size="pageSize" @current-change="pageChange"
							 :pager-count="5">
							</el-pagination>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="c-bottom-box box dynasty">
						<div class="title" id="recom-jump">
							<span class="circle"></span>
							诗词内容
						</div>
						<h3>{{dynastyIndex+1}}.{{dynastyDetail.mingcheng}}</h3>
						<p>[{{chaodai(dynastyDetail.chaodai)}}]{{dynastyDetail.zuozhe}}</p>
						<div v-html="dCode(dynastyDetail.yuanwen)" class="dynasty-txt"></div>
						<div class="btn-q" @click="scqiming(dynastyDetail)">诗词起名</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- 移动端 -->
		<div class="container wrap" style="padding-top: 30px;" v-if="wFlag">
			<el-row :gutter="20">
				<el-col :span="24" :md="16">
					<div class="c-bottom-box box">
						<div class="title" id="recom-jump">
							<span class="circle"></span>
							「{{searchValue}}」诗词全集({{recomTotal}}首)
						</div>
						<el-collapse>
							<el-row :gutter="10">
								<el-col :span="24" class="item-box" v-for="(item,index) in dynastyList" :key="index">
									<el-collapse-item :title="item.mingcheng">
										<el-row>
											<div class="c-bottom-box box dynasty">
												<div class="title" id="recom-jump">
													<span class="circle"></span>
													诗词内容
												</div>
												<h3>{{index+1}}.{{item.mingcheng}}</h3>
												<p>[{{chaodai(item.chaodai)}}]{{item.zuozhe}}</p>
												<div v-html="dCode(item.yuanwen)" class="dynasty-txt"></div>
												<div class="btn-q" @click="scqiming1(item)">诗词起名</div>
											</div>
										</el-row>
									</el-collapse-item>
								</el-col>
							</el-row>
						</el-collapse>
						<div class="page-box">
							<el-pagination background layout="prev, pager, next" :total="recomTotal" :page-size="pageSize" @current-change="pageChange"
							 :pager-count="5">
							</el-pagination>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import banner from "@/assets/images/classicName/banner2.png"
	export default {
		data() {
			return {
				hotArr:["李白","杜甫","王安石","李煜","将进酒","登高"],
				dynastyIndex:0,
				searchValue: "", //搜索框输入
				options: [{
						label: "全部",
						value: "0"
					},
					{
						label: "作者",
						value: "1"
					},
					{
						label: "诗词",
						value: "2"
					}
				],
				selectValue: "0",
				wFlag:false,
				dynastyList: [], // 作者诗词列表
				dynastyDetail:{},//诗词详情
				nameInfo: '', // 分析姓名相关的信息
				pageSize: 100,
				pageIndex: 1,
				dynasty:"",
				zimu:"",
				recomTotal: 0, // 总共有多少个推荐的姓名
				nameParams: {}, // 姓名的详细信息
				fliter: [
					"木",
					"火",
					"土",
					"金",
					"水"
				]
			}
		},
		created() {
			this.searchValue = this.$route.query.word;
			this.selectValue=this.$route.query.type
			
			// this.choicenessName();
		},
		computed: {
			computeSex() {
				if (this.nameParams.sex == 1) return '男';
				else if (this.nameParams.sex == 0) return '女';
				else return '未知';
			},
			// 根据推荐的姓名个数，显示不同的格式如2000+，3000+
			formatRecomTotal() {
				if (this.recomTotal <= 1000) return this.recomTotal;
				return parseInt(this.recomTotal / 1000) * 1000 + '+';
			}
		},
		mounted() {
			let w=document.body.clientWidth
			if(w<450){
				this.wFlag=true
				this.pageSize=10
			}else{
				this.wFlag=false
				this.pageSize=100
			}
			const that = this
			window.onresize = () => {
			  return (() => {
				window.screenWidth = document.body.clientWidth
				w = window.screenWidth
				if(w<450){
					this.wFlag=true
					this.pageSize=10
					this.getNameInfo();
				}else{
					this.wFlag=false
					this.pageSize=100
					this.getNameInfo();
				}
			  })()
			}
			this.getNameInfo();
		},
		methods: {
			scqiming1(e){
				this.$router.push({
					path:'/select_detail',
					query:e
				})
			},
			scqiming(){
				this.$router.push({
					path:'/select_detail',
					query:this.dynastyDetail
				})
			},
			dCode(e){
				if(e){
					return e.replace(/\\n/gm,"<br/>");
				}
			},
			chaodai(e){
				if(e){
					return e.split("")[0]
				}
			},
			dynastyClick(e,i){
				this.dynastyDetail=e
				this.dynastyIndex=i
			},
			hotClick(e){
				this.searchValue=e
			},
			anthorClick(e,i){
				this.dynasty=e
				this.dynastyIndex=i
				this.getNameInfo()
			},
			zimuClick(e,i){
				this.zimu=e
				this.zimuIndex=i
				this.getNameInfo()
			},
			// 生成随机字符串
			randomString(len) {
				len = len || 32;
				var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
				var maxPos = $chars.length;
				var pwd = '';
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			},
			// 查看诗词作者
			getNameInfo() {
				this.$ajax.post("/util/articleSearch", {
						pageIndex: this.pageIndex,
						pageSize:this.pageSize,
						word:this.searchValue,
						type:this.selectValue
					})
					.then(res => {
						if (res.data.code == 0) {
							// this.nameInfo = res.data.data;
							this.dynastyList=res.data.data.list
							this.recomTotal=res.data.data.total
							if(this.dynastyList.length>0){
								this.dynastyClick(this.dynastyList[0],0)
							}
						} else {
							this.$message.error(res.data.msg)
						};
					});
			},
			// 用户点击推荐姓名的分页
			pageChange(page) {
				console.log(page)
				this.pageIndex = page;
				this.getNameInfo();
				window.scroll(0,0)
			},
			
			
		}
	}
</script>

<style scoped>
	.item-name.on{
		font-family:PingFangSC;
		font-weight:300;
		color:rgba(66,66,66,1);
		cursor: text;
	}
	.dynasty h3{
		font-size:18px;
		font-family:FZLTHK;
		font-weight:normal;
		color:rgba(66,66,66,1);
		line-height:40px;
	}
	.dynasty p{
		font-size:15px;
		font-family:PingFangSC;
		font-weight:300;
		color:rgba(66,66,66,1);
		line-height:30px;
	}
	.dynasty .dynasty-txt{
		font-size:15px;
		font-family:PingFangSC;
		font-weight:300;
		color:rgba(66,66,66,1);
		line-height:30px;
		white-space: pre-wrap;
	}
	
	.item-index{
		font-size: 15px;
		color: #424242;
	}
	.item-name{
		color: #3D5DEA;
		font-size: 15px;
		cursor: pointer;
	}
	.c-center-box .smll-item.on{
		cursor: text;
		color: #838383;
	}
	.item .small-title{
		font-size:16px;
		font-family:PingFangSC;
		font-weight:300;
		color:rgba(131,131,131,1);
		line-height:24px;
		margin-right: 10px;
	}
	.item .smll-item{
		margin-left: 15px;
		cursor: pointer;
		font-size:15px;
		font-family:PingFangSC;
		font-weight:bold;
		color:rgba(61,93,234,1);
		line-height:24px;
	}
	.head-box {
		width: 100%;
		padding: 20px;
		background: linear-gradient(58deg, rgba(235, 235, 246, 1), rgba(235, 236, 246, 1));
		border-radius: 10px;
	}

	.input-box {
		max-height: 50px;
		min-height: 45px;
		background-color: #FFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		border-radius: 8px;
		padding: 0 20px;
	}

	.input-box i {
		color: #C9C9C9;
	}

	.input-pla {
		color: #C9C9C9;
		font-size: 18px;
	}

	.btn {
		user-select: none;
		cursor: pointer;
		min-height: 42px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #FFF;
		background: linear-gradient(32deg, rgba(64, 92, 218, 1), rgba(149, 94, 241, 1));
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
		border-radius: 8px;
	}
	.btn-q{
		width:163px;
		height:45px;
		text-align: center;
		line-height: 45px;
		color: #FFF;
		background:linear-gradient(32deg,rgba(64,92,218,1),rgba(149,94,241,1));
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
		border-radius:7px;
		margin: 20px auto 0;
		cursor: pointer;
	}
	.search-hot{
		margin: 19px 0 36px;
		
	}
	.search-hot span{
		color: #FFF;
		margin-right: 30px;
	}
	.hot-title{
		color: #CDCFFC!important;
	}
	.hot-item{
		cursor: pointer;
		margin: 5px 0;
		display: inline-flex;
	}

	.head-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		line-height: 20px;
		transform: translateY(-20px);
	}

	.head-title h3 {
		font-size: 25px;
		font-family: BigruixianBlackGBV1.0;
		font-weight: bold;
		color: rgba(253, 253, 253, 1);
		line-height: 16px;
		text-shadow: 6px 8px 6px rgba(55, 37, 152, 0.33);
	}

	.head-title span {
		display: inline-flex;
		background-color: #FFF;
		width: 15px;
		height: 3px;
		margin: 0 10px;
		box-shadow: 6px 8px 6px rgba(55, 37, 152, 0.33);
	}

	.wrap {
		position: relative;
		
		font-size: 15px;
		background-color: rgb(241, 242, 249);
		padding-bottom: 1px;
	}
	.wrap-bg{
		background: url(../../assets/images/classicName/banner2.png) top no-repeat;
	}

	.step {
		padding: 25px 0;
	}

	.step .active {
		color: #fff;
	}

	.step span {
		color: #ccc;
	}

	.box {
		background: #fff;
		padding: 30px;
		border-radius: 10px;
		margin-bottom: 30px;
	}

	.top-box .avatar-box {
		text-align: center;
		width: 90px;
		overflow: hidden;
		height: 90px;
	}

	.top-box .avatar-box img {
		width: 100%;
	}

	.top-box .item .left {
		color: rgb(131, 131, 131);
	}

	.top-box .item .right {
		color: rgb(61, 93, 234);
	}

	.top-box .item-box .item {
		margin-top: 20px;
		display: flex;
		align-items: center;
	}

	.top-box .item-box .item:first-child {
		margin-top: 0px;
	}

	.top-box .item-box .item .persent {
		height: 6px;
		width: 100px;
		display: inline-block;
		vertical-align: center;
		border-radius: 3px;
		margin-left: 10px;
		background: linear-gradient(left, rgb(98, 146, 225), rgb(240, 240, 240));
	}

	.c-center-box .title,
	.c-bottom-box .title {
		color: #000;
		font-size: 18px;
		display: flex;
		font-weight: 600;
		align-items: center;
		margin-bottom: 15px;
	}

	.c-center-box .title .circle,
	.c-bottom-box .title .circle {
		display: inline-block;
		border-radius: 50%;
		border: 4px solid rgb(250, 97, 102);
		width: 18px;
		margin-right: 10px;
		height: 18px;
	}

	.c-center-box .item {
		margin-top: 10px;
		line-height: 1.5;
	}

	.c-center-box .item .left {
		color: #000;
		font-weight: bold;
	}

	.c-center-box .item .right {
		color: rgb(46, 46, 46);
	}

	.c-bottom-box .item-box {
		/* text-align: center; */
		
		margin-top: 20px;
	}

	@media screen and (max-width:450px) {
		.mt-3{
			margin-top: 10px;
		}
		.item-box .item {
			margin-top: 15px !important;
		}

		.page-box {
			margin-left: -18px;
			margin-right: -18px;
		}

		.box {
			padding-left: 10px;
			padding-right: 10px;
		}

		.c-bottom-box .item {
			width: 100% !important;
			padding: 0 10px !important;
		}

		.c-bottom-box .item .name {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			/* width: 60%!important; */
			font-size: 14px !important;
			color: rgb(61, 93, 234);
		}

		.c-bottom-box .item .name .xing {
			color: #000;
			display: inline-block;
			margin-right: 1px !important;
		}

		.c-bottom-box .item .name .score {
			background-color: #ff5f5f;
			display: inline-flex;
			width: auto !important;
			height: 15px !important;
			padding: 0 2px !important;
			align-items: center;
			justify-content: center;
			border-radius: 5px;
			color: #FFF;
			font-size: 12px !important;
		}

		.c-bottom-box .item .detail {
			display: inline-block;
			color: rgb(131, 131, 131);
			cursor: pointer;
			font-size: 14px;
			padding-left: 8px !important;
			border-left: 1px solid rgb(131, 131, 131);
			transition: all 0.3s;
		}
	}

	.c-bottom-box .item {
		width: 234px;
		height: 72px;
		display: flex;
		margin: auto;
		align-items: center;
		padding: 0 30px;
		justify-content: space-between;
		background: url(../../assets/images/classicName/name_bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.c-bottom-box .item .name {
		font-size: 17px;
		color: rgb(61, 93, 234);
	}

	.c-bottom-box .item .name .xing {
		color: #000;
		display: inline-block;
		margin-right: 6px;
	}

	.c-bottom-box .item .name .score {
		background-color: #ff5f5f;
		display: inline-flex;
		width: 50px;
		height: 20px;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		color: #FFF;
		font-size: 16px;
	}

	.c-bottom-box .item .detail {
		display: inline-block;
		color: rgb(131, 131, 131);
		cursor: pointer;
		font-size: 14px;
		padding-left: 8px;
		border-left: 1px solid rgb(131, 131, 131);
		transition: all 0.3s;
	}

	.c-bottom-box .item .detail:hover {
		color: rgb(61, 93, 234)
	}

	.page-box {
		text-align: center;
		margin-top: 50px;
	}
</style>
